
// 使用说明
//   1 引入这个js文件

//   2 html部分
    /* <ul>
        <li>
            <img src="" alt="">
            <h3>标题</h3>
            <p>详细描述</p>
            <strong>价格</strong>
        </li>
    </ul> */  

//  3 data必须是一个数组  -- 数组嵌套对象
//     数据必须包含这些字段  {goodsSrc, goodsTitle, goodsDes, goodsPrice}


// 参数说明
//   el 可以传选择器  也可以传一个标签对象
//   data
//   pageLen每一次加载的数据长度
//   cb  数据全部加载完成以后需要做的事情  --- 可选参数

function LazyLoad(el, data, pageLen , cb) {
    if(data.constructor !== Array) throw new Error('data参数必须是数组')
    if(el.constructor === HTMLUListElement) {   // 判断el是否已经获取  
        this.ele = el ;
    } else {
        this.ele = document.querySelector(el);
    }
    
    this.page = 1;
    this.pageLen = pageLen;
    this.data = data;
    this.pageAll = Math.ceil(this.data.length / this.pageLen) ;
    // 页面一开就需要加载数据
    this.render();
    this.event() ;
    // 如果参数没有传  ---  就默认给一个空函数
    this.cb = cb || function(){};
}

LazyLoad.prototype.render = function () {
    // 需要在原来的基础上再加20条数据
    let html = this.ele.innerHTML;
    // console.log(data);
    // 0-20    20-40   40-60   ...  100-120->总共只有108  100-108
    let end = this.page * this.pageLen;
    end = end < this.data.length ? end : this.data.length;
    for (let i = (this.page - 1) * this.pageLen; i < end; i++) {
        // 解构
        const { goodsSrc, goodsTitle, goodsDes, goodsPrice } = this.data[i];
        html += `<li>
                <img src="${goodsSrc}" alt="">
                <h3>${goodsTitle}</h3>
                <p>${goodsDes}</p>
                <strong>${goodsPrice}</strong>
            </li>`
    }

    // 
    this.ele.innerHTML = html;
}


LazyLoad.prototype.event = function() {
     // 滚动事件
     window.onscroll =  () => {
        if ( this.page >=  this.pageAll) {
            console.log(8888);
            this.cb()
            return
        }
        // 判断快要到达底部
        if (document.documentElement.scrollHeight - document.documentElement.clientHeight - document.documentElement.scrollTop <= 50) {
            // console.log('到底了');
            this.page++;
            // console.log(page);
            this.render();


            // 第一次   0-20       (page-1) * 20 ,page * 20
            // 第二次   20-40      (page-1) * 20 ,page * 20
            // 第三次   40-60      (page-1) * 20 ,page * 20
        }
    }
}